<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
	</style>
	<body>
		<div id="app">
			<h2>总价格：{{prices}}</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const vm = new Vue({
				el: "#app",
				data: {
					books: [
						{id: 110, name: 'xxxxxx', price: 110},
						{id: 111, name: 'xxxxxx', price: 111},
						{id: 112, name: 'xxxxxx', price: 112},
						{id: 113, name: 'xxxxxx', price: 113},
					]
				},
				computed: {
					// 计算books中书的总价格
					prices: function(){
						// 总价格
						let prices = 0;
						
						// for(let i = 0 ; i < this.books.length ; i++){
						// 	prices += this.books[i].price;
						// }
						
						for(let i in this.books){
							prices += this.books[i].price;
						}
						return prices;
					}
				}
			});
		</script>
	</body>
</html>
